<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
  <head>
    <title>换电网点管理</title>
    <base href="<%=basePath%>">
  </head>
  
  <body>
  
  	<jsp:include page="common.jsp"></jsp:include>
  	<jsp:include page="alert.jsp"></jsp:include>
  	
  	<div class="secMenu-content">
  		<div class="list-hearBar">
	  		<a class="btn btn-primary list-headBtn" href="electric/jsp/websiteNew.jsp">新增网点</a>
  			
  			<form class="form-inline list-headRight right" role="form">
				<input type="text" class="form-control" placeholder="请输入网点名称">
				<select class="form-control">
				  <option>选择网点状态</option>
				  <option>运营中</option>
				  <option>维修中</option>
				  <option>已关闭</option>
				</select>
				
				<button type="submit" class="btn btn-info">搜索</button>
			</form>
  		</div>
  	
  	 	<table class="table table-hover table-striped table-condensed list-table">
	      <thead>
	        <tr>
	          <th>ID</th>
	          <th>网点名称</th>
	          <th>通道数量</th>
	          <th>地区</th>
	          <th>地址</th>
	          <th>电话</th>
	          <th>工作时间</th>
	          <th>产权公司</th>
	          <th>状态</th>
	          <th>超级站</th>
	          <th>操作</th>
	        </tr>
	      </thead>
	      
	      <tbody>
	      	<tr>
	          <th>XDM</th>
	          <td>西斗门</td>
	          <td>32</td>
	          <td>杭州市</td>
	          <td>西湖区西斗门路9号福地2.0创业园</td>
	          <td>13800000000</td>
	          <td>7:00-21:00</td>
	          <td>时空电动</td>
	          <td class="list-state list-state-1">运营中</td>
	          <td>否</td>
	          <td class="list-action">
	          	<a href="electric/jsp/websiteNew.jsp">编辑</a>
	          	<a href="javascript:;" class="list-switch list-switch-on" style="display: none;">运营中</a>
	          	<a href="javascript:;" class="list-switch list-switch-mend">维修中</a>
	          	<a href="javascript:;" class="list-switch list-switch-off">已关闭</a>
	          </td>
	        </tr>
	        
	        <tr>
	          <th>XDM2</th>
	          <td>西斗门</td>
	          <td>32</td>
	          <td>杭州市</td>
	          <td>西湖区西斗门路9号福地2.0创业园</td>
	          <td>13800000000</td>
	          <td>7:00-21:00</td>
	          <td>时空电动</td>
	          <td class="list-state list-state-2">维修中</td>
	          <td>否</td>
	          <td class="list-action">
	          	<a href="electric/jsp/websiteNew.jsp">编辑</a>
	          	<a href="javascript:;" class="list-switch list-switch-on">运营中</a>
	          	<a href="javascript:;" class="list-switch list-switch-mend" style="display: none;">维修中</a>
	          	<a href="javascript:;" class="list-switch list-switch-off">已关闭</a>
	          </td>
	        </tr>
	        
	        <tr>
	          <th>XDM3</th>
	          <td>西斗门</td>
	          <td>32</td>
	          <td>杭州市</td>
	          <td>西湖区西斗门路9号福地2.0创业园</td>
	          <td>13800000000</td>
	          <td>7:00-21:00</td>
	          <td>时空电动</td>
	          <td class="list-state list-state-0">已关闭</td>
	          <td>否</td>
	          <td class="list-action">
	          	<a href="electric/jsp/websiteNew.jsp">编辑</a>
	          	<a href="javascript:;" class="list-switch list-switch-on">运营中</a>
	          	<a href="javascript:;" class="list-switch list-switch-mend">维修中</a>
	          	<a href="javascript:;" class="list-switch list-switch-off" style="display: none;">已关闭</a>
	          </td>
	        </tr>
	        
	      </tbody>
	    </table>
	    
	    <nav>
		  <ul class="pagination right">
		    <li><a href="javascript:;">首页</a></li>
		    <li class="active"><a href="javascript:;">1</a></li>
		  	<li><a href="javascript:;">2</a></li>
		    <li><a href="javascript:;">3</a></li>
		    <li><a href="javascript:;">4</a></li>
		    <li><a href="javascript:;">5</a></li>
		    <li><a href="javascript:;">尾页</a></li>
		  </ul>
		</nav>
	</div>
	
	<script type="text/javascript">
		$(document).ready(function(){
			listSwitch();//运营中、已关闭、维修中
		});
		
		function listSwitch(){
			//运营中
			$(".list-switch-on").on("click",function(){
				var thisItem=$(this);
				thisItem.css("display","none");
				thisItem.siblings(".list-switch").css("display","inline-block");
				thisItem.parents("tr").find(".list-state").text("运营中").css("color","#34D63A");
			});
			//已关闭
			$(".list-switch-off").on("click",function(){
				var thisItem=$(this);
				thisItem.css("display","none");
				thisItem.siblings(".list-switch").css("display","inline-block");
				thisItem.parents("tr").find(".list-state").text("已关闭").css("color","red");
			});
			//维修中
			$(".list-switch-mend").on("click",function(){
				var thisItem=$(this);
				thisItem.css("display","none");
				thisItem.siblings(".list-switch").css("display","inline-block");
				thisItem.parents("tr").find(".list-state").text("维修中").css("color","#FFC107");
			});
		}
		
	</script>
  </body>
</html>

